import React, { Component } from 'react'
import { connect } from 'react-redux'
import { actionCreators } from '../store'
import { Table, Button, Modal } from 'antd'

class Work extends Component {
  constructor(props) {
    super(props)
    this.state = {
      show: false,
      content: {},
      page: 1
    }
  }

  componentDidMount() {
    this.props.getWork({
      page: this.state.page
    })
    setTimeout(() => {
      let cH = document.getElementById('p_content').clientHeight
      let bH = document.body.clientHeight - 180
      let t = document.getElementById('footer')
      if(cH >= bH || bH<=800) {
        t.style.position= 'relative'
      }
    }, 300);
  }

  showContent(obj) {
    this.setState({
      show: true,
      content: obj
    })
  }
  handleCancel() {
    this.setState({
      show: false
    })
  }
  
  renderWork() {
    let dataSource = this.props.work.get('data').toJS()
    let columns = [
      {
        title: '课程',
        key: '1',
        render: (text)=> {
          return text.homework.lessonName
        }
      },
      {
        title: '课时',
        key: '2',
        render: (text)=> {
          return text.homework.period
        }
      },
      {
        title: '题目',
        key: '3',
        render: (text)=> {
          return text.homework.number
        }
      },
      {
        key: '4',
        title: '老师',
        render: (text)=> {
          return text.homework.teacherName
        }
      },
      {
        key: '5',
        title: '修改时间',
        render: (text)=> {
          return text.lastUploadTimeStr
        }
      },
      {
        key: '6',
        title: '得分',
        render: (text)=> {
          return text.score
        }
      },
      {
        key: '7',
        title: '操作',
        render: (text)=> {
          return <Button type="primary" onClick={this.showContent.bind(this, text)}>查看回答</Button>
        }
      }
    ] 
    // this.props.work.map(item => {
    //   arr.push (
    //     <div>
    //       <p style={{height: '30px', paddingLeft: '20px', lineHeight: '30px', backgroundColor: '#f0f0f0'}}>
    //         {item.get('homework').get('lessonName')} 
    //         <span style={{marginLeft: '40px', color: '#8BCA34'}}>第 {item.get('homework').get('number')} 题</span>
    //         <span style={{marginLeft: '20px'}}>修改时间{item.get('lastUploadTimeStr')}</span>
    //         <span style={{float: 'right', marginRight: '20px'}}>得分：<span style={{color: 'red', fontWeight: 'bold'}}>{item.get('score')}</span></span>
    //         <a>查看回答</a>
    //       </p>
    //     </div>
    //   )
    // })
    // return arr
    return <Table dataSource={dataSource} columns={columns}  pagination={{total: this.props.work.get('total')}} onChange={(page)=> this.setState({page}, ()=> this.props.getWork({page}))}/>
  }


  render() {
    return (
      <div>
        {
          this.props.work.get('data') && this.props.work.get('data').size > 0 ? this.renderWork() : <div style={{textAlign: "center", fontSize: '14px'}}>
            暂无作业信息
          </div>
        }
        <Modal
          title={ this.state.content.homework ? this.state.content.homework.lessonName : ''}
          width="60%"
          visible={this.state.show}
          onCancel={this.handleCancel.bind(this)}
          footer={[<Button onClick={this.handleCancel.bind(this)}>确定</Button>]}
        >
          <div>
            <img style={{maxWidth: '100%'}} src={this.state.content.picUrl} />
            <div dangerouslySetInnerHTML={{__html: this.state.content.text}}>
            </div>
          </div>
        </Modal>
      </div>
    )
  }
}

const mapState = (state) => ({
  work: state.getIn(['person', 'work'])
})

const mapDispatch = (dispatch) => ({
  getWork(params) {
    dispatch(actionCreators.getWork(params))
  }
})

export default connect(mapState, mapDispatch)(Work)
